<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/mes/mes/StandardWork.jsx或StandardWork.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
    <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
        :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
        :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
        :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
        :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
        <template #gridHeader>
        </template>
    </view-grid>
    <!-- 弹出框(选择数据) -->
    <select-maintainWorkType ref="maintainWorkTypeRef"
        @onSelectMaintainWorkType="onSelectMaintainWorkType"></select-maintainWorkType>
    <!-- 明细表选择设备 -->
    <select-device ref="deviceRef" @onSelectDevice="onSelectDevice"></select-device>
</template>
<script setup lang="jsx">
import extend from "@/extension/mes/mes/StandardWork.jsx";
import viewOptions from './StandardWork/options.js'
import SelectMaintainWorkType from './StandardWorkSelectMaintainWorkType.vue'
import SelectDevice from './StandardWorkSelectDevice.vue'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

let gridRef;//对应[表.jsx]文件中this.使用方式一样
const maintainWorkTypeRef = ref()
const deviceRef = ref()

//生成对象属性初始化
const onInit = async ($vm) => {
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://doc.volcore.xyz/docs/view-grid
    gridRef = $vm
    const option = gridRef.getFormOption("MaintainWorkTypeName");
    option.readonly = true;
    option.extra = {
        icon: 'el-icon-zoom-out', //显示图标
        text: '选择', //显示文本
        style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
        //触发事件
        click: (item) => {
            maintainWorkTypeRef.value.open();
        }
    };
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
    //明细表行数据设备编码设置弹出框选择数据
    detail.columns.forEach((x) => {
        if (x.field == 'DeviceNumber') {
            x.render = (h, { row, column, index }) => {
                x.edit = null;//设置当前字段不可编辑
                return (
                    <div>
                        <el-button link
                            onClick={($e) => {
                                $e.stopPropagation();
                                //触发事件
                                deviceRef.value.open(row)
                            }}
                            class="el-icon-search"
                            style="color: #2196F3;cursor: pointer;"
                        ></el-button>
                        <span style="margin-left:5px">{row.DeviceNumber}</span>
                    </div>
                );
            };
        }
    })

    // 根据任务标准类型 锁定标准值单位
    detail.columns.forEach(c => {
        if (c.field == 'StandardValueUnit') {
            c.checkEdit = (row, column, index) => {
                if (row.TaskStandardType == 0 || row.TaskStandardType == null) {
                    //可根据row.字段的值返回true/false是否可以编辑
                    return false
                } else {
                    return true
                }
            }
        }
    })

    // 根据任务标准类型，判断标准值中填写数字或是否
    gridRef.detailOptions.columns.forEach(x => {
        if (x.field == 'TaskStandardValue') {
            // 添加提示信息
            x.renderHeader = (h, { row, column, index }) => {
                return (
                    <div>
                        <el-popover
                            placement="top-start"
                            width={300}
                            trigger="hover"
                        >
                            {{
                                reference: () => (
                                    <i class="el-icon-warning-outline" style="color: #2196F3;"></i>
                                ),
                                //自定义提示内容
                                default: () => {
                                    return (
                                        <div style="line-height:1.5;">
                                            <div>任务标准类型为判断型，任务标准值为请填写“是”，“否”。数值型请输入数字！</div>
                                        </div>
                                    )
                                }
                            }}
                        </el-popover>
                        {column.title}
                    </div>

                );
            };

            //如果字段是输入框，添加onKeyPress事件
            x.onKeyPress = (row, column, $event) => {
                //回车事件
                if ($event.keyCode == 13) {
                    if (row.TaskStandardType == 0) {
                        if (row.TaskStandardValue != "是" && row.TaskStandardValue != "否") {
                            row.TaskStandardValue = null
                        }
                    } else if (row.TaskStandardType == 1) {
                        if (isNaN(row.TaskStandardValue)) {
                            row.TaskStandardValue = null
                        }
                    }
                }
            }
            x.blur = (row, column, $event) => {
                if (row.TaskStandardType == 0) {
                    if (row.TaskStandardValue != "是" && row.TaskStandardValue != "否") {
                        row.TaskStandardValue = null
                    }
                } else if (row.TaskStandardType == 1) {
                    if (isNaN(row.TaskStandardValue)) {
                        row.TaskStandardValue = null
                    }
                }
            }
        }
    })

    // 选择任务标准类型时 清空标准值
    gridRef.detailOptions.columns.forEach(x => {
        if (x.field == 'TaskStandardType') {
            //字段是下拉框选择事件  清空标准值
            x.onChange = (row, val, event) => {
                row.TaskStandardValue = null
                row.StandardValueUnit = null
            }
        }
    })
}
//选择客户回调
const onSelectMaintainWorkType = (rows) => {
    editFormFields.MaintainWorkTypeName = rows[0].Name;
    editFormFields.MaintainWorkTypeId = rows[0].MaintainWorkTypeId;
    //这里还可以给其他字段设置值editFormFields.字段=
}
//表格回写事件
const onSelectDevice = (row) => {
}
const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const rowClick = ({ row, column, event }) => {
    //查询界面点击行事件
    grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
